<template>
	<view class="container">
		<view class="address content-item">
			<view class="item">
				<view class="item-title">收货人：</view>
				<view class="item-text">{{addressObj.receiver_name}}</view>
			</view>
			<view class="item">
				<view class="item-title">电话：</view>
				<view class="item-text">{{addressObj.receiver_mobile}}</view>
			</view>
			<view class="item-address" @click="addressClick">
				<view class="item-address-text">{{addressObj.receiver_province}} {{addressObj.receiver_city}} {{addressObj.receiver_district}}
					{{addressObj.receiver_address}}
				</view>
				<uni-icons type="arrowright"></uni-icons>
			</view>
		</view>
		<view class="summary content-item">
			<view class="item">
				<view class="item-title">平台单号：</view>
				<view class="item-text">{{reserveObj.platform_code}}</view>
			</view>
			<view class="item">
				<block v-if="reserveObj.shipped_count >0">
					<view class="item-title">已发货：</view>
					<view class="item-text">{{reserveObj.shipped_count}}/{{reserveObj.qty}}</view>
				</block>
				<block v-else>
					<view style="color: #999;">暂未发货</view>
				</block>
			</view>
			<view class="item">
				<view class="item-title">支付时间：</view>
				<view class="item-text">{{reserveObj.pay_time}}</view>
			</view>
		</view>
		<view class="detail content-item">
			<view class="detail-item" v-for="(item, index) in itemList" @key="index">
				<view class="detail-item-inner">
					<view class="item-left">
						<view class="item-title">{{item.item_name}}</view>
						<view class="item-title-mini">{{item.sku_name}}</view>
						<view class="item-title-mini">￥{{item.price}}</view>
						<view class="item-title-mini">初始数：{{item.origin_quantity}}</view>
					</view>
					<view class="item-right">
						<view class="login-button" @click="changeItem(index)">
							<view>更换商品</view>
							<uni-icons type="arrowright"></uni-icons>
						</view>
						<uni-icons type="trash" size="28" @click="delItem(index)"></uni-icons>
						<uni-number-box @change="itemNumberChange($event, index)" min="1"></uni-number-box>
					</view>
				</view>
			</view>
		</view>
		<block v-if="canSubmit">
			<view class="button-box" @click="submitDelivery">选好了，提交发货请求</view>
		</block>
		<block v-else>
			<view class="button-box" :class="{disabled: !canSubmit}">选好了，提交发货请求</view>
		</block>
		
	</view>

</template>

<script>
	import {
		Reserve
	} from '@/models/reserve.js'
	import {
		Celebrity
	} from '@/models/celebrity.js'
	const reserveModel = new Reserve()
	const celebrityModel = new Celebrity()
	export default {
		data() {
			return {
				reserveId: 0,
				reserveObj: null,
				addressObj: null,
				itemList: [],
				celebrityId: uni.getStorageSync('celebrity_id'),
				itemIndex: 0,
				canSubmit: true
			}
		},
		methods: {
			_loadData(reserveId) {
				reserveModel.getReserveDetail(reserveId, (res) => {
					this.reserveObj = res
					res.item_list.forEach((item)=>{
						item.origin_quantity = item.quantity
					})
					this.itemList = res.item_list
				})
			},
			_loadDefaultAddress(){
				celebrityModel.getDefaultAddress(this.celebrityId, (res) => {
					this.addressObj = res
				})
			},
			addressClick() {
				uni.navigateTo({
					url: '/pages/address/list?celebrity_id=' + this.reserveId
				})
			},
			changeItem(index) {
				uni.navigateTo({
					url: '/pages/sku/list'
				})
				// this.itemList.splice(index, 1)
				this.itemIndex = index
			},
			delItem(index){
				this.itemList.splice(index, 1)
			},
			itemNumberChange(value,index){
				if(Number(this.itemList[index].price) * value > this.reserveObj.virtual_balance){
					uni.showToast({
						icon: 'none',
						title: '超出最大发货数'
					})
					this.canSubmit = false
					return
				}else{
					this.canSubmit = true
				}
				this.itemList[index].quantity = value
				
			},
			submitDelivery(){
				if(!this.addressObj){
					uni.showToast({
						title: '请填写收货地址',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if(this.itemList.length == 0){
					uni.showToast({
						title: '请选择商品',
						icon: 'none',
						duration: 2000
					})
					return
				}
				
				const deliveryCode = `${this.reserveObj.platform_code}_${Date.now().toString().slice(0, 11)}`
				
				
				const submitData = {
					delivery_code: deliveryCode,
					platform_code: this.reserveObj.platform_code,
					receiver_name: this.addressObj.receiver_name,
					receiver_mobile: this.addressObj.receiver_mobile,
					receiver_province: this.addressObj.receiver_province,
					receiver_city: this.addressObj.receiver_city,
					receiver_district: this.addressObj.receiver_district,
					receiver_address:this.addressObj.receiver_address,
					sku_list: this.itemList
				}
				
				reserveModel.submitDelivery(this.reserveId, submitData, (res)=>{
					console.log(res)
					if(res.code < 9999){
						uni.showToast({
							icon: 'none',
							title: '操作成功'
						})
					}else{
						this.canSubmit = false
					}
				})
			}
		},
		onLoad(options) {
			this.reserveId = options.id
			this._loadData(this.reserveId)
		},
		onShow() {
			let selectedSku = uni.getStorageSync('selected_sku')
			if (selectedSku) {
				const quatity = this.itemList[this.itemIndex].origin_quantity
				const price = this.itemList[this.itemIndex].price
				selectedSku.origin_quantity = quatity
				selectedSku.price = price
				this.itemList.splice(this.itemIndex, 1, selectedSku)
				uni.removeStorageSync('selected_sku')
			}
			this._loadDefaultAddress()
		}
	}
</script>

<style lang="scss">
	.content-item {
		width: 96%;
		margin: 16rpx auto;
		border-radius: 18rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.item {
		width: 690rpx;
		margin: 20rpx auto;
		display: flex;
		flex-direction: row;
	}

	.item-address {
		width: 690rpx;
		margin: 20rpx auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.item-address-text {
		width: 90%;
	}

	.detail-item {
		width: 100%;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #e9e9e9;
	}

	.detail-item-inner {
		width: 690rpx;
		height: 200rpx;
		margin: 20rpx auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.item-left {
		width: 90%;
		line-height: 40rpx;
		display: flex;
		flex-direction: column;
	}

	.item-title-mini {
		font-size: 24rpx;
		color: #666;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.item-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		line-height: 30rpx;
	}

	.item-title {
		display: flex;
		flex-direction: row;
	}

	.login-button {
		width: 140rpx;
		height: 50rpx;
		border-radius: 20rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 24rpx;
		display: flex;
		flex-direction: row;
		color: #666;
	}

	.button-box {
		width: 600rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 20rpx auto;
		text-align: center;
		background-color: $uni-color-primary;
		border-radius: 30rpx;
		color: #fff;
	}
	.disabled{
		background-color: #ccc;
	}
</style>